<!DOCTYPE html>
<html>
<head>
	<title>EaselJS: Graphics.inject() Example</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script type="text/javascript">
	var canvas, data, count, stage;
	function init() {
		count = 0;
		data = {};
		
	    canvas = document.getElementById('myCanvas');
	    width = canvas.width;
	    height = canvas.height;
	    stage = new createjs.Stage(canvas);

	   	var shape = new createjs.Shape();
	   	
	   	// even though inject() is going to change the fillStyle, we still need to call
	   	// beginFill, so Graphics knows there is an active fill.
	   	shape.graphics.beginFill("#000")
	   		// this causes setColor to be executed with the data object as a parameter,
	   		// each time shape is redrawn:
	  		.inject(setColor, data)
	   		// this will affect all of the shapes drawn until the next fill is begun:
	   		.drawRect(40,40,100,100)
	   		.drawCircle(230,90,50)
	   		.drawRect(320,40,100,100)
	   		// this new fill will overwrite the injected fillStyle:
	   		.beginFill("#FFF")
	   		.drawRect(90,85,280,10);
	   	
	    stage.addChild(shape);
	    
	    createjs.Ticker.addEventListener("tick", tick);
	}
	
	// this function is "injected" into the Graphics queue above,
	// and will execute in the context of the canvas's Context2D:
	function setColor(o) {
		// sets the context2D's fillStyle to the current value of data.fill:
		this.fillStyle = o.fill; // "this" will resolve to the canvas's Context2D.
	}
	
	function tick(evt) {
		count = (count+3)%360;
		// update the value of the data object:
		data.fill = createjs.Graphics.getHSL(count, 100, 50);
		// redraw the stage:
		stage.update();
	}
	</script>

</head>
<body onload="init()">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Graphics.inject() Example</h1>
	    <p>This example demonstrates how Graphics.inject() can be used to inject arbitrary canvas calls into a Graphics queue.</p>
	</header>

	<canvas id="myCanvas" width="960" height="400"></canvas>

</body>
</html>